<div class="pm_modal small very-important {{ctrl.class}}" role="dialog" style="display: block;">
    <div class="modal-dialog">
        <button type="button" ng-click="ctrl.cancel()" aria-hidden="true" title-translate="Close" title-translate-context="Action" class="fa fa-times close"></button>
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" translate-context="Title" translate>Two-factor authentication enabled</h4>
            </div>
            <div class="modal-body pm_form">
                <p class="alert alert-info">
                    <strong translate-context="Info" translate>Important: Please make sure you saved the recovery codes. Otherwise you can permanently lose access to your account if you lose your 2FA device.</strong>
                    <span translate-context="Info" translate>If you lose your two-factor-enabled device, these codes can be used instead of the 6-digit 2FA code to log into your account. Each code can only be used once.</span>
                </p>
                <div class="pm_grid text-center">
                    <div class="col-4-8">
                        <ul>
                            <li ng-repeat="c in ctrl.recoveryCodesFirstHalf" ng-bind="c"></li>
                        </ul>
                    </div>
                    <div class="col-4-8">
                        <ul>
                            <li ng-repeat="c in ctrl.recoveryCodesSecondHalf" ng-bind="c"></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="pm_button modal-footer-button" ng-click="ctrl.download()" translate translate-context="Action">Download</button>
            <button type="button" class="pm_button primary modal-footer-button" ng-click="ctrl.cancel()" translate translate-context="Action">Done</button>
        </div>
    </div>
    <div class="modal-overlay"></div>
</div>
